<template>
  <a-drawer width="80%" :title="title" :visible="open" @close="handleClose">
    <a-radio-group v-model="tabPosition" button-style="solid" style="margin-bottom: 10px">
      <a-radio-button value="top">上</a-radio-button>
      <a-radio-button value="left">左</a-radio-button>
      <a-radio-button value="right">右</a-radio-button>
      <a-radio-button value="bottom">下</a-radio-button>
    </a-radio-group>
    <a-tabs :tab-position="tabPosition">
      <a-tab-pane v-for="(item, index) in previewList" :key="index" :tab="item.name">
        <div id="codeView" v-highlight>
          <pre class="highlight-wrap"><code v-text="item.value"></code></pre>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div class="bottom-control">
      <a-space>
        <a-button type="dashed" @click="handleClose">取消</a-button>
      </a-space>
    </div>
  </a-drawer>
</template>

<script>
import {previewGenTable} from '@/api/generate/genTable'

export default {
  data() {
    return {
      submitLoading: false,
      title: '代码预览',
      previewList: [],
      open: false,
      tabPosition: 'left'
    }
  },
  methods: {
    /** 点击关闭 */
    handleClose() {
      this.open = false
      this.reset()
    },
    /** 点击预览 */
    handlePreview(row) {
      previewGenTable(row.id).then(res => {
        const list = []
        for (const key in res.data) {
          list.push({
            name: key,
            value: res.data[key]
          })
        }
        this.previewList = list
        this.open = true
      })
    }
  }
}
</script>
<style lang="less" scoped>
.highlight-wrap {
  position: relative;
  background: #21252b;
  border-radius: 5px;
  font: 15px/22px "Microsoft YaHei",Arial,Sans-Serif;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  text-shadow: none;
  color: #000;
  padding-top: 30px;
  box-shadow: 0 10px 30px 0 rgb(0 0 0 / 40%);
}
.highlight-wrap:before {
  content: " ";
  position: absolute;
  border-radius: 50%;
  background: #fc625d;
  width: 12px;
  height: 12px;
  left: 12px;
  margin-top: -18px;
  box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
  z-index: 2;
}
</style>
